
/*编辑器元素*/
var offsetTopOfScreen=0;
var offsetlefOfScreen=0;
var firstMouseMove=0;
$(document).ready(function(){



  var canvas1 = $('#layer1')[0];
  var ctx1 = canvas1.getContext('2d');
  var gridSize = 25;
  var gridSpacing = 10;
  var rowSpacing = 15;
  var rows = 16, columns = 10;
  var gridColor = '#000';
  var highlightColor = 'rgba(173, 216, 230, 0.5)'; // Light blue color

  // Function to draw the grid
  function drawGrid() {
    ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
    ctx1.beginPath();
    for (var row = 0; row < rows; row++) {
      for (var col = 0; col < columns; col++) {
        ctx1.rect(
          gridSpacing + col * (gridSize + gridSpacing),
          gridSpacing + row * (gridSize + rowSpacing),
          gridSize,
          gridSize
        );
      }
    }
    ctx1.strokeStyle = gridColor;
    ctx1.stroke();
  }

  // Function to highlight squares
  function highlightSquares(x, y) {
    var colEnd = Math.floor(x / (gridSize + gridSpacing));
    var rowEnd = Math.floor(y / (gridSize + rowSpacing));

    colEnd = colEnd >= columns ? columns - 1 : colEnd;
    rowEnd = rowEnd >= rows ? rows - 1 : rowEnd;

    for (var row = 0; row <= rowEnd; row++) {
      for (var col = 0; col <= colEnd; col++) {
        ctx1.fillStyle = highlightColor;
        ctx1.fillRect(
          gridSpacing + col * (gridSize + gridSpacing),
          gridSpacing + row * (gridSize + rowSpacing),
          gridSize,
          gridSize
        );
      }
    }

    // Display the selection info
    $('#showInfo').text('Selected Rows: ' + (rowEnd + 1) + ', Columns: ' + (colEnd + 1));
    
    return { rows: rowEnd + 1, columns: colEnd + 1 };
  }
  
  drawGrid(); // Initial grid draw

  // 绘制第二个图层的表格
function drawTableOnLayer2(rows, cols) {
  var canvas2 = $('#layer2')[0];
  var ctx2 = canvas2.getContext('2d');
  var a4Width = 793; // A4 宽度，单位为像素
  var a4Height = 1122; // A4 高度，单位为像素
  var cellWidth = a4Width / cols;
  var cellHeight = a4Height / rows;

  // 清除之前的绘制
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);

  // 开始绘制表格
  ctx2.beginPath();
  for (var row = 0; row < rows; row++) {
    for (var col = 0; col < cols; col++) {
      ctx2.rect(col * cellWidth, row * cellHeight, cellWidth, cellHeight);
    }
  }
  ctx2.strokeStyle = gridColor;
  ctx2.stroke();
}

  // Mousemove event to highlight squares
  $('#layer1').mousemove(function(e) {
    var rect = canvas1.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    drawGrid(); // Redraw the grid to clear previous highlights
    highlightSquares(x, y); // Highlight squares based on mouse position
  });
  function drawTableOnLayer2WithMargins(rows, cols, marginTop, marginBottom, marginLeft, marginRight) {
    var canvas2 = document.getElementById('layer2');
    var ctx2 = canvas2.getContext('2d');
    var a4WidthPixels = 793; // A4宽度，单位为像素
    var a4HeightPixels = 1122; // A4高度，单位为像素
  
    // 边距转换为像素，这里假设边距是以毫米为单位输入的
    var marginTopPixels = marginTop * 3.78;
    var marginBottomPixels = marginBottom * 3.78;
    var marginLeftPixels = marginLeft * 3.78;
    var marginRightPixels = marginRight * 3.78;
  
    // 计算可用于表格的宽度和高度
    var usableWidth = a4WidthPixels - marginLeftPixels - marginRightPixels;
    var usableHeight = a4HeightPixels - marginTopPixels - marginBottomPixels;
  
    // 根据可用宽度和高度计算单元格的宽度和高度
    var cellWidth = usableWidth / cols;
    var cellHeight = usableHeight / rows;
  
    // 清除之前的绘制
    ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
  
    // 开始绘制表格
    ctx2.beginPath();
    for (var row = 0; row < rows; row++) {
      for (var col = 0; col < cols; col++) {
        ctx2.rect(marginLeftPixels + col * cellWidth, marginTopPixels + row * cellHeight, cellWidth, cellHeight);
      }
    }
    ctx2.strokeStyle = 'black';   // 设置线条颜色
    ctx2.stroke();                // 绘制表格线条
  }
  
  // 传入边距值和行列数来绘制表格
  // 假设用户输入的边距值为10mm
  var marginTop = 10; // 上边距
  var marginBottom = 10; // 下边距
  var marginLeft = 10; // 左边距
  var marginRight = 10; // 右边距
  
  // 假设上次选中的行列数
  var lastSelectedRows = 10;
  var lastSelectedCols = 10;

  // Mousedown event to confirm selection and hide the first layer
  $('#layer1').mousedown(function(e) {
    var rect = canvas1.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;
    var selected = highlightSquares(x, y);
    
    //alert('Rows selected: ' + selected.rows + ', Columns selected: ' + selected.columns);




   
  
    // 绘制第二个图层的表格
    // drawTableOnLayer2(selected.rows, selected.columns);
    // 调用函数绘制表格
    drawTableOnLayer2WithMargins(selected.rows, selected.columns, marginTop, marginBottom, marginLeft, marginRight);
    $('#layer1').hide(); // 隐藏第一个 canvas 层
    $('#layer2').show(); // 显示第二个 canvas 层



  });

  // Button click events to switch the layer visibility
  $('#showLayer1').click(function() {
    $('#layer2').hide();
    $('#layer1').show();
    drawGrid();
  });

  $('#showLayer2').click(function() {
    $('#layer1').hide();
    $('#layer2').show();
  });

});
 	



